import React from 'react'
import ListTitle from '../../../components/SystemPrivileges/ListTitle'
import RoleList from '../../../components/SystemPrivileges/RoleList'
import { Select, Space, Button, Row, Col, Switch, Input } from 'antd'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { SearchOutlined } from '@ant-design/icons';
import Bread from '../../../components/Bread'

const { Option } = Select

// 表头
const columns = [{
    title: '成员账号',
    dataIndex: 'member_account',
},
{
    title: '姓名',
    dataIndex: 'member_name',
},
{
    title: '手机号',
    dataIndex: 'member_phone',
},
{
    title: '邮箱地址',
    dataIndex: 'member_email',
},
{
    title: '所属部门',
    dataIndex: 'department_name',
},
{
    title: '成员角色',
    dataIndex: 'role_name',
},
{
    title: '最后登录',
    dataIndex: 'last_login',
},
{
    title: '是否启用',
    dataIndex: 'is_enable',
    render: (text, record) => (
        <>
            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={record.is_enable} />
        </>
    )
},
{
    title: '操作',
    key: 'action',
    render: (text, record) => (
        <Space>
            <Link to={{
                pathname: '/home/afterloan/addwarning',
                loanafter_warning_id: record.loanafter_warning_id,
                state: 1
            }}>编辑</Link>
            <a>删除</a>
        </Space>
    )
}]

export default function StaffManage() {
    const staffList = useSelector(state => state.systemRoleStore.staffList)

    // Searcn 栏
    const Search = (
        <div className='after-search'>
            <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                <Col className="gutter-row" span={8} >
                    <div>
                        <Input placeholder="成员账号/姓名" />
                    </div>
                </Col>
                <Col className="gutter-row" span={8}>
                    <div>
                        <Select
                            showSearch
                            placeholder="所属部门"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="1">Jack</Option>
                            <Option value="2">Lucy</Option>
                            <Option value="3">Tom</Option>
                        </Select>
                    </div>
                </Col>
                <Col className="gutter-row" span={8}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                            查询
                        </Button>
                    </div>
                </Col>
            </Row>
        </div>
    )
    return (
        <div className='staff-manage'>
            <Bread bread_title1="系统权限" bread_title2="员工管理" />
            {Search}
            <ListTitle />
            <RoleList columns={columns} data={staffList || []} />
        </div>
    )
}
